import { clsx } from 'clsx'
import { FaCloudMoon, FaSun } from 'react-icons/fa'
import { useThemeStore } from '@/app/store/theme'

export default function Theme(){

  const {dark,switchDark} = useThemeStore();
  return (
    <div className="w-11/12 bg-slate-300 dark:bg-gray-800 mx-auto mt-20 p-20 flex flex-col gap-10 font-mono  relative">
      <h1 className="text-center text-6xl font-bold dark:text-white">
        Rapidly build modern websites without ever leaving your HTML.
      </h1>
      <p className="text-xl text-gray-600 dark:text-gray-300">
        A utility-first CSS framework packed with classes like <span className="text-sky-500">flex</span>, <span className="text-sky-500">pt-4</span>, <span className="text-sky-500">text-center</span> and <span className="text-sky-500">rotate-90</span> that can be composed to build any design, directly in your markup.
      </p>
      <div className="text-center">
        <button className="px-7 py-3 rounded bg-gray-800 dark:bg-slate-100 dark:text-black font-bold text-white">Get Started</button>
        <input type="text"/>
      </div>
      <button className={clsx("left-5 top-5 p-2  absolute",dark ? 'bg-sky-500' : 'bg-gray-500')}
              onClick={()=> switchDark(!dark)}>
        {
          dark ?  <FaSun/> : <FaCloudMoon/>
        }
      </button>
    </div>
  )
}
